<template>
  <div class="table-box">
    <!-- 必须设置row-key="question_id"，否则拖动后的顺序会出错 -->
    <ProTable
      ref="proTable"
      title="学习记录列表"
      :columns="columns"
      :request-api="getTableList"
      :pagination="false"
      :request-auto="true"
      :init-param="{}"
    >
      <!-- 表格 header 按钮 -->
      <template #tableHeader="scope">
        <el-button type="danger" :icon="Delete" plain :disabled="!scope.isSelected"> 批量删除 </el-button>
      </template>
      <!-- Expand -->
      <template #expand="scope">
        {{ scope.row }}
      </template>
      <!-- usernameHeader -->
      <template #usernameHeader="scope">
        <el-button type="primary" @click="ElMessage.success('我是通过作用域插槽渲染的表头')">
          {{ scope.column.label }}
        </el-button>
      </template>
      <!-- createTime -->
      <template #createTime="scope">
        <el-button type="primary" link @click="ElMessage.success('我是通过作用域插槽渲染的内容')">
          {{ scope.row.createTime }}
        </el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button v-if="scope.row.after_day <= 0" type="primary" link :icon="Edit" @click="handleExercise(scope.row)">
          练习
        </el-button>
        <el-button type="primary" link :icon="Delete" @click="delStudyRecord(scope.row)"> 删除 </el-button>
      </template>
    </ProTable>
    <EditQuestionDrawer ref="editQuestionDrawerRef" />
    <ImportExcel ref="dialogRef" />
  </div>
</template>

<script setup lang="tsx" name="studyRecord">
import { ref } from "vue";
import { useRouter } from "vue-router";
import { Question } from "@/api/interface";
import { useHandleData } from "@/hooks/useHandleData";
import { ElMessage } from "element-plus";
import ProTable from "@/components/ProTable/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { Delete, Edit } from "@element-plus/icons-vue";
import EditQuestionDrawer from "@/views/bank/editQuestionDrawer.vue";
import { deleteStudyRecordApi, listStudyRecordApi } from "@/api/modules/study_record";

const router = useRouter();
const paths = router.currentRoute.value.path.split("/");
const bank_id = paths[paths.length - 1] as string;

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();
// const questionList = ref<Question.QuestionInfo[]>([]);
const getTableList = async (params: any) => {
  let newParams = JSON.parse(JSON.stringify(params));
  newParams.bank_id = bank_id;
  let result = await listStudyRecordApi(newParams);
  for (let study_record of result.data as Array<any>) {
    if (study_record.after_day === -99999999) {
      study_record.next_day = "已完成";
    }
  }
  return result;
};
// const getTableList = async (params: any) => {
//   params.bank_id = bank_id;
//   let result = await getQuestionList(params);
//   console.log(result);
//   questionList.value = result.data;
// };

// 表格配置项
const columns: ColumnProps<Question.QuestionInfo>[] = [
  { prop: "name", label: "单元名称", minWidth: 50 },
  { prop: "study_count", label: "已学习次数", minWidth: 50 },
  { prop: "next_day", label: "下次复习时间", minWidth: 50 },
  { prop: "operation", label: "操作", minWidth: 50 }
];

const delStudyRecord = async (params: Question.QuestionInfo) => {
  await useHandleData(deleteStudyRecordApi, params, `删除试题`);
  proTable.value?.getTableList();
};

// 打开 drawer(新增、查看、编辑)
const editQuestionDrawerRef = ref<InstanceType<typeof EditQuestionDrawer> | null>(null);

const handleExercise = (study_record: any) => {
  router.push("/exercise/index/study_record_id=" + study_record.study_record_id);
};
</script>
